<template>
    <div class="regist_container" >
        <div class="regist_form_item" id="regist" style="width:500px; margin:auto">
            <h1 style="text-align: center;" :v-model="helloMsg">{{helloMsg}}</h1>
            <el-form label-width="80px">
            <el-form-item label="姓氏">
                <el-input v-model="surname"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-input v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="passwd" show-password></el-input>
                <span class="red">{{outputmsg}}</span>
            </el-form-item>
            <el-form-item label="重复密码">
                <el-input placeholder="重复密码" v-model="repasswd" show-password></el-input>
                <span class="red">{{outputrepsd}}</span>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="tel" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11">
                <template slot="prepend">+86</template>
                </el-input>
                <span class="red">{{outputtel}}</span>
            </el-form-item>
            <el-form-item label>
                <el-checkbox label="同意用户协议" :checked="agree" v-model="agree"></el-checkbox>
                <br />
                <el-button class="comit" type="primary" :disabled="permission">立即注册</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      helloMsg: "欢迎加入",
      surname: "",
      name: "",
      passwd: "",
      repasswd: "",
      tel: "",
      agree: false,
      permission: true,
      msg: "",
      outputmsg: "",
      outputrepsd: "",
      outputtel: "",
      flag: true,
    };
  },
  watch: {
    agree: function () {
      if (
        this.agree == true &&
        this.outputmsg == "" &&
        this.outputrepsd == "" &&
        this.outputtel == "" &&
        this.passwd != "" &&
        this.tel != ""
      )
        this.permission = false;
      else this.permission = true;
    },
    passwd: function () {
      var strength = 0;
      if (/\d/.test(this.passwd)) strength++;
      if (/[a-z]/.test(this.passwd)) strength++;
      if (/[A-Z]/.test(this.passwd)) strength++;
      if (this.passwd.length >= 8) strength++;
      this.msg = ["很弱", "弱", "中等", "强", "max"][strength];
      this.disable = !(strength == 3);
      if (
        this.agree == true &&
        this.outputmsg == "" &&
        this.outputrepsd == "" &&
        this.outputtel == "" &&
        this.passwd != "" &&
        this.tel != ""
      )
        this.permission = false;
      else this.permission = true;
    },
    msg: function () {
      if (this.msg == "强") this.outputmsg = "密码长度不够";
      if (this.msg == "弱" || this.msg == "中等")
        this.outputmsg = "密码强度不够，需包含数字和大小写";
      if (this.msg == "max") this.outputmsg = "";
    },
    repasswd: function () {
      if (this.passwd != this.repasswd) this.outputrepsd = "密码不匹配";
      else this.outputrepsd = "";
    },
    tel: function () {
      if (this.tel.length != 11) this.outputtel = "电话号码格式不正确";
      else this.outputtel = "";
      if (
        this.agree == true &&
        this.outputmsg == "" &&
        this.outputrepsd == "" &&
        this.outputtel == "" &&
        this.passwd != "" &&
        this.tel != ""
      )
        this.permission = false;
      else this.permission = true;
    },
  },
};
</script>>
<style>
.nomatch {
  border: red thin solid;
}
.comit {
  position: absolute;
  top: 60px;
  left: 320px;
}
.red {
  color: red;
}

.regist_container {
  background-color: #2b4b6b;
  height: 100%;
}
.regist_form_item{
    background-color:white;
    height: 65%;
    padding: 30px;
    position: absolute;
    top: 100px;
    left: 600px;
}

</style>>
